<template>
	<view class="content">
		<view class="sousou">
			<u-search placeholder="请输入搜索内容" @custom="goSearch" v-model="keyword" bgColor="#fff" borderColor="#ddd"></u-search>
		</view>
		
		<view class="searchContent" v-if="searchList == 0">
			<view class="searchTitie">
				<image src="../../static/tgImg.png" mode=""></image>
			</view>
			<view class="boxList">
				<view class="boxli" @click="goDetail(item)" v-for="(item, index) in productList" :key="index">
					<view class="boxSuo" v-if="index < 3">
						<image src="../../static/tag1.png" v-if="index == 0" mode=""></image>
						<image src="../../static/tag2.png" v-if="index == 1" mode=""></image>
						<image src="../../static/tag3.png" v-if="index == 2" mode=""></image>
					</view>
					<view class="boxSuo" v-else>
						{{index + 1}}
					</view>
					<view class="boxImg">
						<image :src="item.fengImg" mode=""></image>
					</view>
					<view class="boxTxt">
						{{language == 'zh_CN'?item.product_name:item.product_egname}}
					</view>
				</view>
			</view>
		</view>
		
		<view class="searchContent" v-else>
			<view class="shopList">
				<block v-for="(item, index) in searchList" :key="index">
					<view class="shopli" @click="goDetail(item)">
						<view class="shopImg">
							<image :src="item.fengImg" mode=""></image>
						</view>
						<text class="pName">{{language == 'zh_CN'?item.product_name:item.product_egname}}</text>
						<text class="datee">{{item.createTime}}</text>
					</view>
				</block>
			</view>
		</view>
		
	</view>
</template>

<script>
	import baseUrl from '@/utils/config.js';
	import { getProductList, getBannerList, getPhone } from '@/api/login.js';
	export default {
		data() {
			return {
				productList: [],
				searchList: [],
				keyword: '',
				language: ''
			}
		},
		onShow() {
			this.language = this.$i18n.locale;	
			this.getProduct();
		},
		methods: {
			goSearch() {
				if(this.keyword != '') {
					const pmm = {
						product_name: this.keyword
					};
					getProductList(pmm).then(res=>{
						if(res.rows.length > 0) {
							res.rows.forEach(item=>{
								item.fengImg = baseUrl + item.product_img.split(',')[0]
							})
							this.searchList = res.rows;
						} else {
							this.searchList = [];
						}
						
					});
				}
			},
			goDetail(val) {
				uni.navigateTo({
					url:`/pages/detail/detail?id=${val.id}`
				});
			},
			getProduct() {
				getProductList().then(res=>{
					res.rows.forEach(item=>{
						item.fengImg = baseUrl + item.product_img.split(',')[0]
					})
					this.productList = res.rows;
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.content{
	
	.sousou{
		padding:20rpx 25rpx;background-color:#efeef3;
	}
	.searchContent{
		padding:30rpx 25rpx;background-color:#fafafa;
		.shopList{
			@include flx;flex-wrap: wrap;justify-content: space-between;
			.shopli{
				width: 48%;border:1px solid #ddd;border-radius: 15rpx;padding-bottom: 20rpx;margin-bottom:20rpx;
				.shopImg{
					image{
						width: 100%;border-radius: 15rpx 15rpx 0 0;
					}
				}
				text{
					display: block;@include baseFont(28rpx,#000,40rpx);padding:0 10rpx;
				}
				.pName{
					margin-top:10rpx;
				}
				.datee{
					color:#666;font-size:20rpx;
				}
			}
		}
		.searchTitie{
			image{
				width:135rpx;height:31rpx;
			}
		}
		.boxList{
			border:1px solid #ddd;padding:30rpx;border-radius:15rpx;margin-top:10rpx;
			.boxli{
				@include flx;align-items: center;margin-bottom:20rpx;
				.boxSuo{
					@include baseFont(28rpx,#aaa,95rpx);width:48rpx;text-align: center;
					image{
						width:48rpx;height:37rpx;
					}
				}
				.boxImg{
					margin:0 22rpx 0 35rpx;
					image{
						width:95rpx;height:95rpx;
					}
				}
				.boxTxt{
					@include baseFont(28rpx,#343434,95rpx);
				}
			}
		}
	}
}
</style>
